<template>
  <div class="form-container">
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="dynamicRules" size="medium" label-width="100px"
               label-position="left">
        <el-col :span="24">
          <el-form-item label-width="150px" label="生成功能" prop="functionPoint">
            <el-checkbox-group v-model="formData.functionPoint" :min="1" size="medium"
                               @change="updateSectionVisibility">
              <el-checkbox v-for="(item, index) in functionPointOptions" :key="index" :label="item.value"
                           :disabled="item.disabled" border>{{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="150px" label="包名" prop="packageName">
            <el-input v-model="formData.packageName" placeholder="提示：com.landray.sany.custom" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="150px" label="模块名" prop="moduleName">
            <el-input v-model="formData.moduleName" placeholder="提示：sany-custom" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="150px" label="作者" prop="author">
            <el-input v-model="formData.author" placeholder="提示：hebq" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="150px" label="API介绍" prop="functionIntroduction">
            <el-input v-model="formData.functionIntroduction" placeholder="提示：定制集成" clearable
                      :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="150px" label="类名" prop="className" v-if="isModuleSectionShown">
            <el-input v-model="formData.className" placeholder="提示：SanyCustom" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="150px" label="接口方法名" prop="apiMethodName" v-if="isApiSectionShown">
            <el-input v-model="formData.apiMethodName" placeholder="提示：getTodo" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="150px" label="接口功能介绍" prop="apiMethodIntroduction" v-if="isApiSectionShown">
            <el-input v-model="formData.apiMethodIntroduction" placeholder="提示：获取待办" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="150px" label="定时任务方法名" prop="schedulerMethodName"
                        v-if="isSchedulerSectionShown">
            <el-input v-model="formData.schedulerMethodName" placeholder="提示：pushTodo" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="150px" label="定时任务功能介绍" prop="schedulerMethodIntroduction"
                        v-if="isSchedulerSectionShown">
            <el-input v-model="formData.schedulerMethodIntroduction" placeholder="提示：推送待办" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="150px" label="流程监听类名" prop="processName" v-if="isProcessSectionShown">
            <el-input v-model="formData.processName" placeholder="提示：SanyInquiry" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="150px" label="流程监听功能介绍" prop="processIntroduce"
                        v-if="isProcessSectionShown">
            <el-input v-model="formData.processIntroduce" placeholder="提示：监听预审流程事件" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="generateApiCode">生成模板代码</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        functionPoint: [0],
        packageName: 'com.landray.sany.custom',
        moduleName: 'sany-custom',
        author: 'hebq',
        functionIntroduction: '定制接口',
        className: 'SanyCustom',
        apiMethodName: undefined,
        apiMethodIntroduction: undefined,
        schedulerMethodName: undefined,
        schedulerMethodIntroduction: undefined,
        processName: undefined,
        processIntroduce: undefined
      },
      isApiSectionShown: false,
      isSchedulerSectionShown: false,
      isProcessSectionShown: false,
      isModuleSectionShown: true,
      rules: {
        functionPoint: [{
          required: true,
          type: 'array',
          message: '请至少选择一个功能生成',
          trigger: 'change'
        }],
        packageName: [{
          required: true,
          message: '提示：com.landray.sany.custom',
          trigger: 'blur'
        }],
        moduleName: [{
          required: true,
          message: '提示：sany-custom',
          trigger: 'blur'
        }],
        author: [{
          required: true,
          message: '提示：hebq',
          trigger: 'blur'
        }],
        functionIntroduction: [{
          required: true,
          message: '提示：定制集成',
          trigger: 'blur'
        }],
        className: [],
        apiMethodName: [],
        apiMethodIntroduction: [],
        schedulerMethodName: [],
        schedulerMethodIntroduction: [],
        processName: [],
        processIntroduce: [],
      },
      functionPointOptions: [{
        "label": "API接口",
        "value": 0,
        "handler": function () {
          this.isApiSectionShown = this.formData.functionPoint.includes(0);
          this.isSchedulerSectionShown = this.formData.functionPoint.includes(1);
          this.isProcessSectionShown = this.formData.functionPoint.includes(1);
          this.isModuleSectionShown = this.formData.functionPoint.includes(0) || this.formData.functionPoint.includes(1) || this.formData.functionPoint.includes(3);
        }
      }, {
        "label": "定时任务",
        "value": 1,
        "handler": function () {
          this.isApiSectionShown = this.formData.functionPoint.includes(0);
          this.isSchedulerSectionShown = this.formData.functionPoint.includes(1);
          this.isProcessSectionShown = this.formData.functionPoint.includes(2);
          this.isModuleSectionShown = this.formData.functionPoint.includes(0) || this.formData.functionPoint.includes(1) || this.formData.functionPoint.includes(3);

        }
      }, {
        "label": "流程监听",
        "value": 2,
        "handler": function () {
          this.isApiSectionShown = this.formData.functionPoint.includes(0);
          this.isSchedulerSectionShown = this.formData.functionPoint.includes(1);
          this.isProcessSectionShown = this.formData.functionPoint.includes(2);
          this.isModuleSectionShown = this.formData.functionPoint.includes(0) || this.formData.functionPoint.includes(1) || this.formData.functionPoint.includes(3);

        },
      }, {
        "label": "模块监听",
        "value": 3,
        "handler": function () {
          this.isApiSectionShown = this.formData.functionPoint.includes(0);
          this.isSchedulerSectionShown = this.formData.functionPoint.includes(1);
          this.isProcessSectionShown = this.formData.functionPoint.includes(2);
          this.isModuleSectionShown = this.formData.functionPoint.includes(0) || this.formData.functionPoint.includes(1) || this.formData.functionPoint.includes(3);
        }
      }],
    }
  },
  computed: {
    dynamicRules() {
      const rules = {
        functionPoint: [{
          required: true,
          type: 'array',
          message: '请至少选择一个功能生成',
          trigger: 'change'
        }],
        packageName: [{
          required: true,
          message: '提示：com.landray.sany.custom',
          trigger: 'blur'
        }],
        moduleName: [{
          required: true,
          message: '提示：sany-custom',
          trigger: 'blur'
        }],
        author: [{
          required: true,
          message: '提示：hebq',
          trigger: 'blur'
        }],
        functionIntroduction: [{
          required: true,
          message: '提示：定制集成',
          trigger: 'blur'
        }],
        // 动态必填项的规则
        className: this.isModuleSectionShown ? [{ required: true, message: '类名不能为空', trigger: 'blur' }] : [],
        apiMethodName: this.isApiSectionShown ? [{ required: true, message: '接口方法名不能为空', trigger: 'blur' }] : [],
        apiMethodIntroduction: this.isApiSectionShown ? [{ required: true, message: '接口功能介绍不能为空', trigger: 'blur' }] : [],
        schedulerMethodName: this.isSchedulerSectionShown ? [{ required: true, message: '定时任务方法名不能为空', trigger: 'blur' }] : [],
        schedulerMethodIntroduction: this.isSchedulerSectionShown ? [{ required: true, message: '定时任务功能介绍不能为空', trigger: 'blur' }] : [],
        processName: this.isProcessSectionShown ? [{ required: true, message: '流程监听类名不能为空', trigger: 'blur' }] : [],
        processIntroduce: this.isProcessSectionShown ? [{ required: true, message: '流程监听功能介绍不能为空', trigger: 'blur' }] : [],
      };
      return rules;
    },
  },
  watch: {},
  created() {
  },
  mounted() {
    this.updateSectionVisibility();
  },
  methods: {
    generateApiCode() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
        const formData = this.formData;
        const packageName = formData.packageName
        const className = formData.className
        const moduleName = formData.moduleName
        const apiMethodName = formData.apiMethodName
        const apiMethodIntroduction = formData.apiMethodIntroduction
        const schedulerMethodName = formData.schedulerMethodName
        const schedulerMethodIntroduction = formData.schedulerMethodIntroduction
        const processName = formData.processName
        const processIntroduce = formData.processIntroduce
        const functionPoints = formData.functionPoint
        console.log('functionPoints',functionPoints)
        const functionArray = []
        for (var i = 0; i < functionPoints.length; i++) {
          functionArray.push(functionPoints[i] + '');
        }
        console.log('functionArray',functionArray)
        const functionList = encodeURIComponent(JSON.stringify(functionArray));
        const author = formData.author
        const functionIntroduction = formData.functionIntroduction
        this.$download.zip("/tool/generate/api?packageName=" + encodeURIComponent(packageName) +
          '&className=' + encodeURIComponent(className) + '&moduleName=' + encodeURIComponent(moduleName) +
          '&apiMethodName=' + encodeURIComponent(apiMethodName) + '&apiMethodIntroduction=' + encodeURIComponent(apiMethodIntroduction) +
          '&schedulerMethodName=' + encodeURIComponent(schedulerMethodName) + '&schedulerMethodIntroduction=' + encodeURIComponent(schedulerMethodIntroduction) +
          '&processName=' + encodeURIComponent(processName) + '&processIntroduce=' + encodeURIComponent(processIntroduce) + "&functionList=" + functionList +
          '&author=' + encodeURIComponent(author) + '&functionIntroduction=' + encodeURIComponent(functionIntroduction), this.formData.moduleName + "-api.zip");
      })
    },
    updateSectionVisibility() {
      const _this = this
      this.functionPointOptions.forEach(option => {
        if (option.handler) {
          option.handler.call(this);
          console.log('isModuleSectionShown', _this.isModuleSectionShown)
          console.log('isApiSectionShown', _this.isApiSectionShown)
          console.log('isSchedulerSectionShown', _this.isSchedulerSectionShown)
          console.log('isProcessSectionShown', _this.isProcessSectionShown)
        }
      });
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  }
}

</script>
<style>
.form-container {
  max-width: 800px; /* 按需调整最大宽度 */
  margin: 100px auto;
  display: flex;
  justify-content: center;
}

</style>>
